<template>
	<view class="content">
		<view class="main">
			<!-- style="background: url(../../static/img/white.gif) no-repeat;background-size: cover;" -->
			<view class="dream main_item" @click="toDream" >
				梦想清单
			</view>
			<view class="today main_item" @click="showSupply">
				今日准则
			</view>
		</view>
		<view class="main_2">
			<view class="main_item_2"></view>
			<view class="main_item_2"></view>
		</view>

		<view class="tips">
			<view class="tip_1">
				给第一次使用飞行日记的你!
				<van-icon name="smile-o" color="#ccc" size=30 @click="Clitip(1)" />
			</view>
			<view class="tip_2">
				<view class="text">
					专注做事情的样子是最美的!
					<van-icon style="margin-left:5px" color="#ccc" @click="Clitip(2)" name="volume-o" />
				</view>
				<view class="btn" @click=" show_pop = true ">
					去记录
				</view>
				<view class="btn_2"></view>
			</view>
		</view>

		<!-- 轻提示 专注输入框为空  -->
		<van-notify id="van-notify" />
		<!-- 弹出框- 提示 -->
		<van-dialog
			title="hello哇!!!"
			message="这个程序可以记一些你的所思所想\n我觉得比手机记事本好的地方只有一个就是足够可爱!哈哈哈 希望你喜欢!"
			:show="show_dia"
			custom-class="my-custom-class"
			@confirm="confirm"
		/>
		<van-dialog
			title="欢迎使用专注笔记功能!"
			message="在这里可以点击左侧去记录\n 就可以记录你当下想完成的事!"
			:show="show_dia_2"
			custom-class="my-custom-class"
			@confirm="confirm"
		/>

		<!-- 弹出框 删除事件 -->
		<van-dialog
			title="确定删除吗?"
			message="删除了!"
			:show="show_dia_3"
			custom-class="my-custom-class"
			@confirm="confirm_sure"
			showCancelButton=true
			@cancel="cancel"
		/>
		<!-- 弹出框 心灵鸡汤 -->
		<van-dialog
			title="今日准则!"
			:message="show_text"
			:show="show_supply"
			custom-class="my-custom-class"
			@confirm="confirm"
		/>


		<!-- 弹出层  专注事件输入框 -->
		<van-popup :show="show_pop" @close="onClose" round=true >
			<view class="inp">
				<view class="inp_header">
					<text>{{nowTime.year}}/{{nowTime.month}}/{{ nowTime.day }} </text>
					<!-- <text> {{nowTime.hours}}:{{nowTime.mintes}} </text> -->
					<text> {{nowTime.week}} </text>
				</view>
				<textarea @blur="confirm_text" @input="inputFn" class="textarea" placeholder="快来写下今天你的专注事情吧!" :value="text_pop"  />
			</view>
		</van-popup>



		<view class="attention">
			<view class="txt" style="width: 100%;" v-for="(item,index) in text_List" :key="index">
				<view style="display: flex;justify-content: space-around;width: 100%;">
					<view class="txt_header">NO.{{index+1}}
						<text style="display: inline-block; margin-left: 200rpx;">
							{{item.time.month}}/{{item.time.day}} &nbsp;&nbsp;   {{item.time.hours}}:{{item.time.mintes}}
						</text>
					</view>
				</view>
				
				<view style="word-wrap: break-word;display:flex;">
					<view class="txt_main">
						{{item.value}}
					</view>
					<!-- 删除 -->
					<view class="txt_btn" style="line-height: 80rpx;" @click="del_text(index)">
						<van-icon name="close" style="#ccc" />
					</view>
				</view>	
				<van-divider/>
			</view>
		</view>



		<!-- tab导航栏 -->
		<view class="tabbar">
			<view class="tab faxian" @click="Clitab(0)" :style="tabbar_sel===0? 'background-color:#eaffc2;':'' ">
				发现
			</view>
			<view class="tab riji" @click="Clitab(1)" :style="tabbar_sel===1? 'background-color:#eaffc2;':'' ">
				日记
			</view>
			<view class="tab wode" @click="Clitab(2)" :style="tabbar_sel===2? 'background-color:#eaffc2;':'' ">
				我的
			</view>
		</view>
		<view class="tabbar_2"></view>
	</view>
</template>

<script>
import Notify from '../../wxcomponents/@vant/weapp/notify/notify';
	export default {
		data() {
			return {
				// 选择tab的索引
				tabbar_sel:0,
				show_dia:false, // 弹出窗1是否显示
				show_dia_2:false, // 弹出窗2是否显示
				show_dia_3:false , // 弹出窗3是否显示
				show_supply:false, // 展示课每日鸡汤
				is_sure:false, // 确定删除 
				show_pop:false , // 弹出层是否显示
				show_text: "",
				// 当前时间
				nowTime:{
					year:0,
					month:0,
					day:0,
					hours:0,
					minutes:0,
					week:''
				},
				text_pop:'', // 输入框的值
				stop_input:false , // 尝试阻止input回填
				text_List:[],// 专注事件的数据 
				index:0 , // 专注事件的数据用的索引
				del_index:0 , // 删除数据的索引
				// 鸡汤数组
				supply_list:[
					{
						index:0,
						str:'做一个精彩的自己，跟着自己的直觉走，别怕失去，别怕失败，别怕路远，做了才有对错，经历才有回忆'
					},
					{
						index:1,
						str:'做一个精彩的自己，跟着自己的'
					},
					{
						index:2,
						str:'做一个精彩的自己，跟着自己的直觉走，别怕失去，别怕'
					},
					{
						index:3,
						str:'做一个'
					},
					{
						index:4,
						str:'做一个精彩的历才有回忆'
					}
				]
			}
		},
		onLoad() {
			this.getNowTime()
			this.text_List = JSON.parse(uni.getStorageSync('text_List'))
		},
		methods: {
			// 去梦想清单
			toDream(){
				uni.redirectTo({url:'/pages/index/dream'})
			},
			// 获取当前时间函数
			getNowTime(){
				var myDate = new Date();
				this.nowTime.year = myDate.getFullYear(); //获取完整的年份(4位,1970-????)
				this.nowTime.month = (myDate.getMonth().toString()).length === 1 ? `0${myDate.getMonth()+1}` : myDate.getMonth()+1; // 月份+1
				this.nowTime.day =  (myDate.getDate().toString()).length === 1 ? `0${myDate.getDate()}` : myDate.getDate(); //获取当前日(1-31)
				this.nowTime.week = myDate.getDay() === 0 ? '周日': `周${myDate.getDay()}`
				this.nowTime.hours = myDate.getHours(); //获取当前小时数(0-23)
				this.nowTime.mintes = (myDate.getMinutes().toString()).length === 1 ? `0${myDate.getMinutes()}` : myDate.getMinutes(); //获取当前分钟数(0-59)
				console.log(this.nowTime);
			},
			// 点击tab
			Clitab(n){
				if(n ===0){
					this.tabbar_sel = 0
					uni.redirectTo({url:'/pages/index/index'})
				}else if(n === 1){
					this.tabbar_sel = 1
					uni.redirectTo({url:'/pages/journal/journal'})
				}else if(n === 2){
					this.tabbar_sel = 2
					uni.redirectTo({url:'/pages/wode/wode'})
				}
			},
			// 点击tip
			Clitip(n){
				console.log('点击tip');
				if(n===1){
					this.show_dia = true
				}else if (n===2){
					this.show_dia_2 = true
				}else if (n ===3) {
					this.show_dia_3 = true
				}
			},
			confirm(){
				this.show_dia = false  // 弹窗关闭
				this.show_dia_2 = false  // 弹窗关闭
				this.show_supply = false 
			},
			// 关闭弹出层事件
			onClose(){
				this.show_pop = false
				// 获取本地存储里的事件
				this.text_List = JSON.parse(uni.getStorageSync('text_List'))
				console.log('要渲染的数据', this.text_List);
			},
			// 文本域失焦事件
			confirm_text(e){
				if((e.detail.value).trim() === ''){
					Notify({ type: 'primary', message: '输入点内容吧!' });
				}else {
					console.log(e.detail.value);
					
					const res = {
						index:this.index,
						value:e.detail.value,
						time:{
							year:new Date().getFullYear(),
							month:(new Date().getMonth().toString()).length === 1 ? `0${new Date().getMonth()+1}` : new Date().getMonth()+1,
							day:(new Date().getDate().toString()).length === 1 ? `0${new Date().getDate()}` : new Date().getDate(),
							week:new Date().getDay() === 0 ? '周日': `周${new Date().getDay()}`,
							hours:new Date().getHours(),
							mintes:(new Date().getMinutes().toString()).length === 1 ? `0${new Date().getMinutes()}` : new Date().getMinutes()
						}
					}
					this.text_List.push(res)
					uni.setStorageSync( 'text_List', JSON.stringify(this.text_List))
					this.index++
					e.detail.value = ' '
					this.text_pop = " "
					console.log(this.text_List,'所有的数据');
				}
			},
			inputFn(){
				console.log('input事件');
			},
			// 删除事件
			del_text(index){
				this.show_dia_3 = true
				this.del_index = index
			},
			// 确定删除事件
			confirm_sure(){
				this.show_dia_3 = false  // 弹窗关闭
				this.is_sure = true 
				//  确定删除
				if(this.is_sure){
					this.text_List.splice(this.del_index,1)
					uni.setStorageSync('text_List', JSON.stringify(this.text_List))
					console.log('this.text_List',this.text_List);
				}
			},
			// 取消删除
			cancel(){
				this.show_dia_3 = false  // 弹窗关闭
				this.is_sure = false // 
			},
			// 展示 今日准则
			showSupply(){
				this.show_text = this.supply_list[parseInt(Math.random()*(this.supply_list.length +1))].str
				this.show_supply =true
			}
		}
	}
</script>

<style>
	page{
		background-color: #eaffc2 ;
	}
	.tabbar{
		display: flex;
		position: fixed;
		bottom: 20px;
		transform: translateX(12%);
		z-index: 9;

	}
	.tabbar_2{
		width: 540rpx;
		height: 32px;
		border: 1px solid #000;
		border-radius: 15px;
		position: fixed;
		bottom: 20px;
		transform: translateX(13%) translateY(5px);
	}
	.tab{
		width: 180rpx;
    height: 30px;
		line-height: 30px;
		text-align: center;
		background-color: #fff;
		font-size: 12px;
	}
	.faxian{
		border: 1px solid #000;
		border-right: 0;
		border-radius: 15px 0 0 15px;
	}
	.riji{
		border: 1px solid #000;
	}
	.wode{
		border: 1px solid #000;
		border-left: 0;
		border-radius:0 15px 15px 0;
	}
	.main{
		width: 93%;
		display: flex;
		justify-content: space-around;
		align-items: center;
		position: absolute;
		z-index: 9;
	}
	.main_item{
		width: 280rpx;
		height: 280rpx;
		line-height: 280rpx;
		border: 1px solid #000;
		background-color:#fff ;
		border-radius: 15px;
		text-align: center;
	}
	.main_2{
		width: 100%;
		display: flex;
		justify-content: space-around;
		transform: translate(10px,8px);
	}
	.main_item_2{
		width: 280rpx;
		height: 280rpx;
		border: 1px solid #000;
		background-color: #abffb5 ;
		border-radius: 15px;
	}
	.attention{
	  width: 84%;
    border: 2rpx solid #000;
    border-radius: 30rpx;
    background-color: #fff;
    margin-top: 80rpx;
    transform: translateX(27rpx);
		padding: 30rpx;
	}
	.tips{
		margin-top: 60rpx;
    font-size: 30rpx;
    font-weight: bold;
    padding-left: 30rpx;
	}
	.tip_2{
		margin-top: 30rpx;
		font-weight: normal;
		display: flex;
		justify-content: space-between;
		position: relative;
	}
	.btn{
		width: 180rpx;
		height: 50rpx;
		line-height: 50rpx;
		text-align: center;
		background-color: #ffec3f;
		border: 1px solid #000;
		border-radius: 30rpx;
		position: absolute;
    top: 0;
    right: 0;
		z-index: 9;
	}
	.btn_2{
		width: 180rpx;
		height: 50rpx;
		position: absolute;
    top: 12rpx;
    right: -4rpx;
		background-color: #eaffc2;
		border: 1px solid #000;
		border-radius: 30rpx;
	}
	.inp{
		background-color: #eaffc2;
    padding: 20rpx 30rpx;
    font-size: 30rpx;
	}
	.inp_header{
		display: flex;
		justify-content: space-between;
	}
	.textarea{
		width: 500rpx;
    background-color: #fff;
    height: 500rpx;
    margin-top: 24rpx;
    border: 1px solid #000;
    border-radius: 30rpx;
    padding: 20rpx;
		
	}
	.txt{
    z-index: 1;
	}
	.txt_header{
		background-color: #abffb5;
    border: 1px solid #000;
    border-radius: 15rpx;
    padding: 0px 10rpx;
	}
	.txt_main{
		width: 90%;
		height: 80rpx;
		line-height: 80rpx;
	}
</style>
